<template>
	<view class="container">
		<view class="headerNav">
			<u-navbar title="我的积分" :border-bottom="false" @leftClick="toBack"
				:background="{ background: 'transparent' }" title-color="#fff" back-icon-color="#fff"
				placeholder></u-navbar>
		</view>
		<view class="bigNav" :style="'height: '+data.height+';'">
			<view class="topnav">
				<view class="leftnav">
					<text>当前积分</text>
					<view class="item-list">
						<text>{{data.myPoints}}</text>
						<text>积分</text>
					</view>
				</view>
				<view class="rightnav">

					<view class="rightcenter" @tap="sigin">
						<image
							:src="data.is_sigin==0?'/pages/pagesPersonal/static/myscorecard/qiandao2.png':'/pages/pagesPersonal/static/myscorecard/qiandaovoer.png'"
							mode=""></image>
						<text
							:style="data.is_sigin==0?'color: #FB9145;':' color: rgba(187, 187, 187, 0.81)'">{{data.is_sigin==0?'马上签到':'已签到'}}</text>

					</view>
				</view>
			</view>
			<view class="bottomnav" >
				<view class="bottomcenter">
					<view class="tabchange">
						<view class="tableft" @tap="toserve('serve')">
							<image src="/pages/pagesPersonal/static/myscorecard/shouzhi.png" mode=""></image>
							<text>服务订单</text>
						</view>
						<view class="line"></view>
						<view class="tabright" @tap="toserve('detail')">
							<image src="/pages/pagesPersonal/static/myscorecard/fuwu.png" mode=""></image>
							<text>收支明细</text>
						</view>
					</view>
					<view class="tabdata">
						<view class="tablist" v-for="(item,index) in data.datalist" :key="item.id" >
							<view class="listleft">
								<image :src="data.imglist[item.alias]" mode=""></image>
								<view class="text">
									<text>{{item.name}}</text>
									<text>积分:{{item.points}}</text>
								</view>
							</view>
							<view class="listright">
								
								<view v-if="item.is_done == 0" @tap="justDoTi(item.alias)" class="bttonbbb">
									<text>去完成</text>
								</view>
								<!-- <button v-if="item.is_done == 0" @tap="justDoTi(item.alias)">去完成</button> -->
								<image v-if="item.is_done == 1" src="/pages/pagesPersonal/static/myscorecard/pass.png"
									mode="">
								</image>
							</view>
						</view>

					</view>

				</view>
			</view>
		</view>

	</view>
</template>

<script setup>
	import {
		ref,
		reactive
	} from "vue"
	import {
		onReady,
		onShow,
		onLoad
	} from '@dcloudio/uni-app'

	const data = reactive({
		isNav: true,
		height: null,
		myPoints: 0,
		datalist: [],
		is_sigin: 0,
		imglist: {
			"sign_in": "/pages/pagesPersonal/static/myscorecard/qiandao.png",
			"bind_weixin": "/pages/pagesPersonal/static/myscorecard/weixin.png",
			"bind_qq": "/pages/pagesPersonal/static/myscorecard/qq.png",
			"refresh_resume": "/pages/pagesPersonal/static/myscorecard/shuaxin.png",
			"upload_photo": "/pages/pagesPersonal/static/myscorecard/userimg.png",
			"percent60": "/pages/pagesPersonal/static/myscorecard/wanzhengdu60.png",
			"percent90": "/pages/pagesPersonal/static/myscorecard/wanzhengdu90.png",
			"apply_job": "/pages/pagesPersonal/static/myscorecard/toudi.png",
			"report_job": "/pages/pagesPersonal/static/myscorecard/jvbao.png",
			"reg": "/pages/pagesPersonal/static/myscorecard/reg.png",

		}

	})

	const sigin = async () => {
		let res = await uni.$u.api.sign_in()
		if (res) {
			data.is_sigin = 1
			myPoints()
		}
	}
	const myPoints = async () => {
		let res = await uni.$u.api.myPoints({})
		if (res) {
			data.myPoints = res.points
			data.datalist = res.task

			for (var i = 0; i < data.datalist.length; i++) {
				if (data.datalist[i].alias == "sign_in") {
					data.is_sigin = data.datalist[i].is_done
					
				}
				if(data.datalist[i].alias == "bind_qq"){
					
					data.datalist.splice(i,1)
				}
			}
		}
	}

	const justDoTi = (i) => {
		switch (i) {
			case "sign_in":
				sigin()
				break;
			case "bind_weixin":
				uni.$u.route("pages/pagesPersonal/set/bindaccount/bindaccount")
				break;
			case "bind_qq":
				uni.$u.route("pages/pagesPersonal/set/bindaccount/bindaccount")
				break;
			case "refresh_resume":
				uni.$u.route({
					url: "pages/personal/index",
					type: 'tab'
				})
				break;
			case "upload_photo":
				uni.$u.route("pages/pagesPersonal/myResume/information/information")
				break;
			case "percent60":
				uni.$u.route("pages/pagesPersonal/myResume/myResume")
				break;
			case "percent90":
				uni.$u.route("pages/pagesPersonal/myResume/myResume")
				break;
			case "apply_job":
				uni.switchTab({
					url: "/pages/home/home"
				})
				break;
			case "report_job":
				uni.switchTab({
					url: "/pages/home/home"
				})
				break;
			case "reg":
				break;

		}

	}

	const toserve = (i) => {
		switch (i) {
			case "serve":
				uni.$u.route("pages/pagesPersonal/integral/serve/serve")
				break;
			case "detail":
				uni.$u.route("pages/pagesPersonal/integral/detail/detail")
				break;
		}
	}
	// 返回上一页
	const toBack = () => {
		if (!data.isNav) {
			uni.$u.route({
				type: 'redirect',
				url: 'pages/login/status'
			})
		} else {
			uni.$u.route({
				type: 'back'
			})
		}
	}
	// 获取列表展示高度
	const getListHeight = async () => {
		let res = await uni.$u.getRect('.headerNav');
		if (res) {
			data.height = (uni.$u.sys().windowHeight - res.height) + 'px';
		}
	}

	onReady(() => {
		getListHeight()
	})
	onShow(() => {
		myPoints()
	})
</script>
<style>
	page {
		background-color: #f0f0f0 !important;
	}
</style>
<style lang="scss" scoped>
	page {
		width: 100vw;
		height: 100%;
		
		font-family: Arial;
	}

	.container {
		padding:0 30rpx;
		width: 100%;
		height: 100%;
		background-image: url("/pages/pagesPersonal/static/myscorecard/bg.png");
		background-repeat: no-repeat;
		background-position: top;
		background-size: 100% auto;

		.bigNav {
			width: 100%;
			padding-top: 30rpx;

			.topnav {
				width: 100%;
				height: 150rpx;
				display: flex;
				font-family: SourceHanSansSC-regular;

				.leftnav {
					color: #fff;
					font-size: 28rpx;
					width: 50%;
					height: 100%;

					.item-list {
						text:nth-child(1) {
							font-size: 80rpx;
						}
					}

				}

				.rightnav {
					width: 50%;
					height: 100%;
					font-size: 28rpx;
					display: flex;
					align-items: center;
					position: relative;

					.rightcenter {
						position: absolute;
						right: -30rpx;
						width: 264rpx;
						height: 64rpx;
						background-color: #fff;
						border-bottom-left-radius: 32rpx;
						border-top-left-radius: 32rpx;
						color: #FB9145;
						display: flex;
						align-items: center;
						justify-content: center;

						image {
							width: 36rpx;
							height: 34rpx;
							margin: 0 10rpx;
						}
					}

				}
			}

			.bottomnav {
				width: 100%;
				height: calc(100% - 150rpx);
				padding-top: 45rpx;
				

				.bottomcenter {
					width: 100%;
					height: 100%;
					background-color: #fff;
					padding: 30rpx;
					overflow-y: scroll;

					.tabchange {
						width: 100%;
						height: 100rpx;
						display: flex;
						align-items: center;
						text-align: center;
						line-height: 100rpx;

						.tableft {
							width: 49%;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 45rpx;
								height: 45rpx;
								vertical-align: middle;
								margin: 0 10rpx;
							}

						}

						.line {
							height: 75rpx;
							width: 1rpx;
							border-left: 1rpx solid #000;
						}

						.tabright {
							width: 49%;
							display: flex;
							align-items: center;
							justify-content: center;

							image {
								width: 42rpx;
								height: 42rpx;
								vertical-align: middle;
								margin: 0 10rpx;

							}
						}
					}

					.tabdata {
						width: 100%;

						.tablist {
							width: 100%;
							height: 140rpx;
							display: flex;
							align-items: center;
							justify-content: space-between;

							.listleft {
								display: flex;
								font-size: 26rpx;
								color: #BBBBBB;

								image {
									width: 78rpx;
									height: 78rpx;
									margin: 0 20rpx;
								}

								.text {
									display: flex;
									flex-direction: column;
									font-family: SourceHanSansSC-bold;

									text:nth-child(1) {
										color: #000;
										font-size: 28rpx;
										font-weight: bold;
									}
								}
							}

							.listright {
						
								.bttonbbb{
									width: 156rpx;
									height: 68rpx;
									color: #3F8EFF;
									font-size: 28rpx;
									border-radius: 34rpx;
									background-color: #fff;
									border: 2rpx solid #3F8EFF;
									display: flex;
									justify-content: center;
									align-items: center;
								}

								image {
									width: 130rpx;
									height: 78rpx;
								}
							}
						}
					}
				}

			}
		}
	}
</style>